<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<script>
    $(function (){
        //异步获取商品分类信息
        $.ajax({
            url:"/admin/goodstype/getAllGoodstype",
            method:"POST",
            data:null,
            success:function (data){
                let html = "";
                $.each(data, function (index,goodstype){
                    html = html +
                        "<option value='" + goodstype.tid + "'>" + goodstype.goodstypeName + "</option>";
                })
                $("#inputGoodstype").html(html);
            }
        });

        //添加按钮点击响应事件
        $("#insert").click(function (){
            //获取页面数据并去除空格
            let inputGoodsName = $.trim($("#inputGoodsName").val());
            let inputGoodsStock = $.trim($("#inputGoodsStock").val())
            let inputGoodstype = $.trim($("#inputGoodstype").val());
            let inputGoodsPrice = $.trim($("#inputGoodsPrice").val());
            let inputGoodsDescribe = $.trim($("#inputGoodsDescribe").val());
            //判断是否有空值
            if (inputGoodsName != "" && inputGoodstype != ""&& inputGoodsStock && inputGoodsPrice != "" && $("#goodsImg")[0].files[0] != null){
                //封装数据
                let formData = new FormData();
                formData.append("tid",inputGoodstype);
                formData.append("goodsName",inputGoodsName);
                formData.append("goodsStock",inputGoodsStock);
                formData.append("goodsPrice",inputGoodsPrice);
                formData.append("goodsDescribe",inputGoodsDescribe);
                formData.append("goodsImg",$("#goodsImg")[0].files[0]);
                $.ajax({
                    url: "/admin/goods/insert",
                    method: "POST",
                    data:formData,
                    processData: false,   // jQuery不要去处理发送的数据
                    contentType: false,   // jQuery不要去设置Content-Type请求头
                    success:function (data){
                        if (data){
                            location.href = "/admin/goods";
                        }else {
                            $("#modalText").text("有重复商品名");
                            $("#myModal").modal('show');
                        }
                    }
                })
            }else {
                $("#modalText").text("商品名、商品库存、商品价格和商品图片不允许为空");
                $("#myModal").modal('show');
            }
        });

        //重置按钮点击响应事件
        $("#reset").click(function (){
            //将页面文本框内容清空
            $("#inputGoodsName").val(null);
            $("#inputGoodsStock").val(null);
            $("#inputGoodsPrice").val(null);
            $("#inputGoodsDescribe").val(null);
        })
    })
</script>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <form method="post" action="/goods/uploadImg" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="inputGoodsName">商品名称</label>
                    <input type="text" class="form-control" id="inputGoodsName" placeholder="请输入商品名称">
                </div>
                <div class="form-group">
                    <label for="inputGoodstype">商品分类：</label>
                    <select id="inputGoodstype" class="form-control">
                        <option></option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="inputGoodsPrice">商品库存</label>
                    <input type="number" class="form-control" id="inputGoodsStock" placeholder="请输入商品库存">
                </div>
                <div class="form-group">
                    <label for="inputGoodsPrice">商品价格</label>
                    <input type="text" class="form-control" id="inputGoodsPrice" placeholder="请输入商品价格">
                </div>
                <div class="form-group">
                    <label for="inputGoodsDescribe">商品描述</label>
                    <textarea class="form-control" id="inputGoodsDescribe" rows="3"></textarea>
                </div>

                <div class="form-group">
                    <label for="goodsImg">添加商品图片：</label>
                    <input type="file" class="form-control-file" id="goodsImg">
                </div>

                <button id="insert" type="button" class="btn btn-primary">添加</button>
                <button id="reset" type="button" class="btn btn-primary">重置</button>
            </form>
        </main>
    </div>
</div>
<!--引入模态框-->
<th:block th:insert="~{/fixed/modal::modal}"></th:block>
</body>
</html>